<template>
  <div class="attach-upload-item" :class="{ disabled: loading }">
    <div class="aui-view">
      <img v-if="file.viewType === 'image'" :src="file.url" :alt="file.name" class="aui-view-img" />
      <i v-else class="fa aui-view-icon" :class="file.viewIcon"></i>
    </div>
    <div class="aui-action-mask"></div>
    <div class="aui-action">
      <div class="aui-action-btns">
        <slot name="viewAction" v-if="file.viewType === 'image'"></slot>

        <el-button v-else-if="file.viewType === 'link'" round @click="handleLinkFile(file)">
          <i class="fa fa-external-link"></i>
        </el-button>
        <el-button
          v-else
          round
          icon="el-icon-download"
          @click="handleDownloadFile(file)"
        ></el-button>
        <el-button
          v-if="!viewMode"
          round
          icon="el-icon-delete"
          @click="handleDeleteFile(file)"
        ></el-button>
      </div>
    </div>
    <div v-if="file.loading" class="aui-percent-loading">
      <i class="el-icon-loading"></i>
    </div>
    <div class="aui-name">
      <div class="aui-name-bg"></div>
      <div class="aui-name-percent" :style="{ width: `${file.percent}%` }"></div>
      <div class="aui-name-text">{{ file.name }}</div>
    </div>
  </div>
</template>

<script>
import { downloadByLink } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    loading: Boolean,
    viewMode: Boolean,
    file: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handlePreviewFile(file) {
      const { url, name } = file
      this.$utils.viewer({
        images: [{ url, name }],
      })
    },
    handleLinkFile(file) {
      const { url } = file
      window.open(url, '_blank')
    },
    handleDownloadFile(file) {
      const { url, name } = file
      downloadByLink({ url, filename: name })
    },
    handleDeleteFile(file) {
      this.$emit('delete', file)
    },
  },
}
</script>

<style lang="scss" scoped>
.attach-upload-item {
  position: relative;
  overflow: hidden;
  height: 136px;
  margin: 0.5rem 0;
  border: 1px solid $gray-200;
  border-radius: 0.25rem;

  &.disabled {
    cursor: not-allowed;
  }

  &:not(.disabled):hover {
    .aui-action {
      display: block;
    }
    .aui-action-mask {
      opacity: 1;
    }
  }
}

.aui-name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 26px;

  &-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2px 0.5rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }

  &-percent {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    background-color: $primary;
  }
}

.aui-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  &-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -68%);
    font-size: 3.6rem;
    color: $gray-600;
  }
}

.aui-action {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: none;

  &-btns {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-68%);
    display: flex;
    justify-content: center;
  }
}

.aui-action-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: all 0.3s;
}

.aui-percent-loading {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  padding-top: 20%;
  text-align: center;
  color: $gray-500;
  font-size: 3rem;
}
</style>
